<template>
  <formItem :item="item">
    <a-input
      v-if="getSingleInputAttr(item.rules)[1]"
      :maxLength="getSingleInputAttr(item.rules)[1]"
      v-model="item['value']"
      placeholder="请输入"
      allowClear
      :disabled="disabled"
    >
      <div slot="addonAfter" v-if="!['', 0].includes(getSingleInputAttr(item.rules)[1])">
        {{ item['value'].length || 0 }}/{{ getSingleInputAttr(item.rules)[1] }}
      </div>
    </a-input>
    <a-input v-else v-model="item['value']" allowClear placeholder="请输入" :disabled="disabled"> </a-input>
  </formItem>
</template>

<script>
export default {
  components: {
    formItem: () => import('./formItem.vue')
  },

  props: {
    disabled: {
      type: Boolean
    },

    item: {
      type: Object,
      default() {
        return null
      }
    }
  },

  computed: {
    getSingleInputAttr() {
      return rules => {
        let newArr = JSON.parse(JSON.stringify(rules.rule))

        if (!Array.isArray(newArr)) {
          newArr = [newArr]
        }

        let arr = ['', 0] //  0.最大长度 1.最小长度

        newArr.forEach(el => {
          let item = el['@attributes']

          switch (item.type) {
            case 'maxLength':
              arr[1] = parseInt(item.value)
              break

            case 'minLength':
              arr[2] = parseInt(item.value)
              break
          }
        })

        return arr
      }
    }
  }
}
</script>
